body{
    margin: 0;
    padding: 0;
    height: 100vh;
    /* 弹性布局 水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background:  linear-gradient(200deg,#f4efef,#e3eeff);
}

.loading{
    width: 200px;
    height: 200px;
    /* 网格布局 */
    display: grid;
    /* 制作3列的网格容器 */
    grid-template-columns: repeat(3,1fr);
    /* 设置行与列之间的间隙 */
    grid-gap: 10px;
    /* 对子部分进行编号 */
    /* counter-reset: number; */
    /* ctrl + shift / */
    /* 旋转45度 */
    transform: rotate(45deg);
}

.loading span{
    /* 自定义属性 */
    --c:red;
    /* 使用var函数定义属性 --c */
    background-color: var(--c);
    position: relative;
    transform: rotate(0);
    /* 执行动画  名字  时长   线性   无限重复 */
    animation: blinking  2s linear infinite;
    /* 等待几秒开始动画 */
    animation-delay: var(--d);
}

.loading span::before{
    /* 设置增量 */
    /* counter-increment: number; */
    /* 将编号赋值到content 这里有助于我们根据编号设置样式 */
    /* content:counter(number); */
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
}

.loading span:nth-child(7){
    --c:#f15a5a;
    --d:0s;
}

.loading span:nth-child(4),
.loading span:nth-child(8){
    --c:#f0c419;
    --d:0.2s;
}

.loading span:nth-child(1),
.loading span:nth-child(5),
.loading span:nth-child(9){
    --c:#4eba6f;
    --d:0.4s;
}

.loading span:nth-child(2),
.loading span:nth-child(6){
    --c:#2d95bf;
    --d:0.6s;
}

.loading span:nth-child(3){
    --c:#955ba5;
    --d:0.8s;
}

@keyframes blinking {
    0%,100%{
        transform: scale(0);
    }
    40%,80%{
        transform: scale(1);
    }
}